<!DOCTYPE html>
<html>
<head>
	<title>追溯信息 | 追溯系统</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
	<van-nav-bar safe-area-inset-top></van-nav-bar>
</head>
<body>
<div id="app">
	<van-nav-bar title="商品追溯信息" left-text="主页" right-text=" "
	             left-arrow @click-left="onClickLeft"></van-nav-bar>
	<van-divider>基本信息</van-divider>
	<van-list	>
		<van-cell  title="商品名称">{{this.baseData.type}}</van-cell>
		<van-cell  title="生产日期">{{this.baseData.manufactureDate}}</van-cell>
		<van-cell  title="所属订单编号">{{this.baseData.batch}}</van-cell>
		<van-cell  title="最终质检结果">{{this.baseData.remark}}</van-cell>
		<van-cell  title="最终质检人">{{this.baseData.inspectionPerson}}</van-cell>
		<van-cell  title="最终质检日期">{{this.baseData.inspectionDate}}</van-cell>
	</van-list>

	<van-divider>原材料追溯</van-divider>
	<van-collapse v-model="activeMaterial">
		<van-collapse-item v-for="(item,index) in materialData" :title="item.alias" :name="index">
			<div><label >供货商：</label>{{item.supplier}}</div>
			<div><label >进货日期：</label>{{item.createTime.replace('T',' ').slice(0,19)}}</div>
			<div><label >过期时间：</label>{{item.deadline}}</div>
		</van-collapse-item>


	</van-collapse>
	<van-divider>质检状况追溯</van-divider>
	<van-collapse v-model="activeQuality">
		<van-collapse-item v-for="(item,index) in qualityData" :title="`质检类型：【`+item.content.slice(8,10)+ `】质检结果：【`+item.content.slice(11,13) + `】`" :name="index">
			<div>{{item.operationPerson}}提交于{{item.createTime.replace('T',' ').slice(0,19)}}</div>
			<div>{{item.content}}</div>
		</van-collapse-item>
	</van-collapse>

	<van-divider>物流追溯</van-divider>
	<van-steps direction="vertical" :active="0">
		<van-step v-for="item in logisticsData"
		          :timestamp="item.createTime.replace('T',' ').slice(0,19)">
			<h3>{{ item.content }}</h3>
			<p>{{ item.operationPerson }} 提交于{{item.createTime.replace('T', ' ').slice(0, 19)}}</p>
		</van-step>
	</van-steps>
</div>
</body>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                logisticsData: null,
                materialData: null,
		            qualityData:null,
		            baseData:null,
                activeMaterial: ['1'],
                activeQuality: ['1'],
		            activeBase:['1','2','3','4','5','6']
            }
        },
        methods: {
            onClickLeft() {
                location.replace("scan.html");
            },
        },
        created() {
            const _this = this;
            let url = "http://1.15.139.169:8082/trace/query?productId=";
            $.ajax({
                url: url + getQueryVariable("id"),
                method: "get",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Authorization", localStorage.getItem("TOKEN"));
                },
                success: function (result) {
                    console.log(result);
                    _this.logisticsData = result.data.logistics;
                    _this.materialData = result.data.material;
                    _this.qualityData = result.data.quality;
                    _this.baseData = result.data.base.records[0];
                },
                error: function (result) {
                    console.log(result);
                    alert("二维码解析失败！请重试");
                    location.replace("scan.html")
                }
            })
        }
    })

    //拿到地址参数
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return false;
    }
</script>
</html>
